import { useWantStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { ChangeEventHandler, KeyboardEventHandler, useState } from "react"; import { Button, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Input, Row, } from "reactstrap"; import { useTo } from "taehui-ts/fe-utilities"; export default observer(() => { const { textInput, setTextInput, wantVariety, setWantVariety } = useWantStore(); const [isWantVarietyOpened, setWantVarietyOpened] = useState(false); const t = useTranslations(); const to = useTo(); const onWant = () => { if (textInput) { to(`/want/${wantVariety}/${encodeURIComponent(textInput)}?page=1`); } }; const onWantInput: ChangeEventHandler<HTMLInputElement> = ({ target: { value }, }) => { setTextInput(value); }; const onInputLower: KeyboardEventHandler<HTMLInputElement> = ({ key }) => { if (key === "Enter") { onWant(); } }; const onCloseWantVariety = () => { setWantVarietyOpened(!isWantVarietyOpened); }; const onInputWantVariety = (wantVariety: "essay" | "comment") => () => { setWantVariety(wantVariety); }; return ( <Row className="g-0"> <Col className="m-1" xs="auto"> <Dropdown isOpen={isWantVarietyOpened} toggle={onCloseWantVariety}> <DropdownToggle caret> {t(wantVariety)}</DropdownToggle> <DropdownMenu> <DropdownItem onClick={onInputWantVariety("essay")}> {t("essay")} </DropdownItem> <DropdownItem onClick={onInputWantVariety("comment")}> {t("comment")} </DropdownItem> </DropdownMenu> </Dropdown> </Col> <Col className="m-1"> <Input type="search" value={textInput} onChange={onWantInput} onKeyDown={onInputLower} /> </Col> <Col className="m-1" xs="auto"> <Button color="success" onClick={onWant}> {t("onWant")} </Button> </Col> </Row> ); });